<!DOCTYPE html>
<html>
<head>
    <title>Particle Animation</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #000;
        }
        
        canvas {
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
    <script>
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
        let particles = [];
        
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        
        class Particle {
            constructor(x, y, size, color, speedX, speedY) {
                this.x = x;
                this.y = y;
                this.size = size;
                this.color = color;
                this.speedX = speedX;
                this.speedY = speedY;
                this.shape = Math.random() < 0.5 ? 'circle' : 'square';
            }
            
            update() {
                this.x += this.speedX;
                this.y += this.speedY;
                
                if (this.size > 0.2) this.size -= 0.1;
            }
            
            draw() {
                ctx.beginPath();
                if (this.shape === 'circle') {
                    ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
                } else {
                    ctx.rect(this.x - this.size, this.y - this.size, this.size * 2, this.size * 2);
                }
                ctx.fillStyle = this.color;
                ctx.fill();
            }
        }
        
        function createParticles(e) {
            const xPos = e.x;
            const yPos = e.y;
            const color = `hsl(${Math.random() * 360}, 100%, 50%)`;
            
            for (let i = 0; i < 5; i++) {
                particles.push(new Particle(xPos, yPos, Math.random() * 5 + 1, color, Math.random() - 0.5, Math.random() - 0.5));
            }
        }
        
        function animateParticles() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            
            for (let i = 0; i < particles.length; i++) {
                particles[i].update();
                particles[i].draw();
                
                if (particles[i].size <= 0.2) {
                    particles.splice(i, 1);
                    i--;
                }
            }
            
            requestAnimationFrame(animateParticles);
        }
        
        window.addEventListener('mousemove', createParticles);
        animateParticles();
    </script>
</body>
</html>
